<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>
    <script src="js/vue.global.js"></script>
    <style>
        table, tr, td {
            text-align: center;
            border-collapse: collapse;
            border: 1px solid red;
        }

        th, td {
            width: 120px;
            height: 32px;
            line-height: 32px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div id="box">
    <table>
        <tr>
            <td>序号</td>
            <td>ID</td>
            <td>名称</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <!--
        <tr v-for="student in student_list">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
        -->
        <tr v-for="student,key in student_list">
            <td>{{key}}</td> <!-- 序号 -->
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td v-if="student.sex">男</td>
            <td v-else>女</td>
        </tr>
    </table>
</div>
<script>
    var oc_vm = Vue.createApp({
        data() {
            return {
                student_list: [
                    {"id": 1, "name": "张三", "age": 19, "sex": true},
                    {"id": 2, "name": "张三2", "age": 12, "sex": false},
                    {"id": 3, "name": "张三3", "age": 29, "sex": true},
                    {"id": 4, "name": "张三4", "age": 33, "sex": true},
                ]
            }
        }
    }).mount("#box")
</script>
</body>
</html>